<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>田螺网络书城首页</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f7f8fc; /* 淡雅背景色 */
      color: #333;
    }

    header {
      background-color: #4a90e2; /* 更柔和的蓝色 */
      color: white;
      padding: 15px 40px; /* 调整内边距 */
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加细微阴影 */
    }

    header h1 {
      margin: 0;
      font-size: 22px; /* 调整标题大小 */
    }

    .user-info {
      font-size: 14px;
    }

    .container {
      padding: 20px 40px; /* 调整容器内边距 */
    }

    .search-bar {
      margin-bottom: 25px; /* 调整间距 */
      display: flex;
      gap: 10px;
    }

    .search-bar input {
      flex: 1;
      padding: 12px 15px; /* 增加输入框内边距 */
      font-size: 16px;
      border-radius: 20px; /* 圆角 */
      border: 1px solid #dfe1e5; /* 浅灰色边框 */
      transition: box-shadow 0.2s ease;
    }
    .search-bar input:focus {
      outline: none;
      border-color: #4a90e2;
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); /* 聚焦效果 */
    }


    .search-bar button {
      padding: 12px 25px; /* 增加按钮内边距 */
      font-size: 16px;
      background-color: #4a90e2; /* 统一按钮颜色 */
      color: white;
      border: none;
      border-radius: 20px; /* 圆角 */
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .search-bar button:hover {
      background-color: #357abd; /* 悬停加深颜色 */
    }

    .section-title { /* 新增：用于分类和书籍列表的标题 */
      margin-top: 30px;
      margin-bottom: 15px;
      font-size: 20px;
      color: #333;
      border-left: 4px solid #4a90e2;
      padding-left: 10px;
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 调整最小宽度 */
      gap: 15px;
      margin-bottom: 30px; /* 增加分类和书籍列表的间距 */
    }

    .category-card {
      background-color: white;
      padding: 15px; /* 调整内边距 */
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
      text-align: center;
      font-size: 16px; /* 调整字体大小 */
      font-weight: 500; /* 调整字重 */
      color: #357abd;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .category-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    }

    /* --- 新增：书籍列表样式 --- */
    .book-grid {
      display: grid;
      /* grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 调整卡片最小宽度 */
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 稍微加宽卡片 */
      gap: 20px; /* 增加卡片间距 */
    }

    .book-card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      overflow: hidden; /* 防止图片溢出 */
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.2s ease;
    }

    .book-card:hover {
      box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    }

    .book-card img {
      width: 100%;
      /* height: 200px; /* 固定图片高度 */
      aspect-ratio: 3 / 4; /* 保持图片比例 */
      object-fit: cover; /* 覆盖填充，不变形 */
      display: block;
    }

    .book-info {
      padding: 15px;
      flex-grow: 1; /* 让信息区域填充剩余空间 */
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* 内容上下分布 */
    }

    .book-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin: 0 0 8px 0; /* 书名下方间距 */
      /* 最多显示两行 */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 2.4em; /* 保证两行的高度 */
    }

    .book-price {
      font-size: 18px; /* 价格字体稍大 */
      color: #e91e63; /* 醒目的价格颜色 */
      font-weight: bold;
      margin: 5px 0;
    }
    .book-price::before {
      content: '¥';
      font-size: 0.8em;
      margin-right: 2px;
    }

    .book-stock {
      font-size: 13px;
      color: #757575; /* 库存字体颜色稍浅 */
      margin: 5px 0 0 0; /* 底部间距 */
    }
    .buy-button {
      background-color: #4CAF50; /* 绿色 */
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      font-size: 16px;
    }

    .buy-button:hover {
      background-color: #45a049; /* 悬停效果 */
    }

    /* --- 样式结束 --- */
    #result { /* 用于显示搜索/分类结果信息 */
      margin-top: 30px;
      font-size: 16px;
      padding: 15px;
      background-color: #e3f2fd;
      border-left: 4px solid #4a90e2;
      border-radius: 4px;
    }
    #result:empty { /* 如果没内容则不显示 */
      display: none;
    }

    @media (max-width: 768px) {
      header {
        padding: 15px 20px;
      }
      .container {
        padding: 20px;
      }
      .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 小屏幕调整卡片大小 */
      }
    }


    @media (max-width: 600px) {
      .search-bar {
        flex-direction: column;
      }
      .search-bar input,
      .search-bar button {
        width: 100%;
        border-radius: 20px; /* 保持圆角 */
      }
      .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      }
      .book-grid {
        grid-template-columns: repeat(2, 1fr); /* 超小屏幕固定两列 */
        gap: 15px;
      }
      .book-title {
        font-size: 14px;
        min-height: 2.1em;
      }
      .book-price {
        font-size: 16px;
      }
      .book-stock {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

<header>
  <h1>📚 田螺网络书城</h1>
  <div class="user-info" id="user-info">加载中...</div>
</header>

<div class="container">
  <div class="search-bar">
    <input type="text" id="search-input" placeholder="搜索书名或关键词..." />
    <button onclick="searchBooks()">🔍 搜索</button>
  </div>

  <h2 class="section-title">图书分类</h2>
  <div class="category-grid">
    <div class="category-card" onclick="searchCategory('科技')">科技</div>
    <div class="category-card" onclick="searchCategory('历史')">历史</div>
    <div class="category-card" onclick="searchCategory('艺术')">艺术</div>
    <div class="category-card" onclick="searchCategory('小说')">小说</div>
    <div class="category-card" onclick="searchCategory('文学')">文学</div>
  </div>

  <h2 class="section-title">推荐书籍</h2>
  <div id="book-list-container" class="book-grid">
    <p>正在加载书籍...</p> </div>

  <div id="result"></div>
</div>

<script>
  const API_BASE_URL = ''; // 如果你的 API 部署在不同的域或路径下，请设置这里，例如 'http://your-api.com'

  async function loadHomePageData() { // 重命名函数，更清晰地表示加载首页所有数据
    const token = localStorage.getItem('token');
    const userInfoElement = document.getElementById('user-info');
    const bookListContainer = document.getElementById('book-list-container');

    if (!token) {
      alert('请先登录');
      // window.location.href = '/login'; // 实际项目中取消注释
      userInfoElement.textContent = '请先登录';
      bookListContainer.innerHTML = '<p>请先登录查看书籍。</p>'; // 清空书籍列表区域并提示
      return;
    }

    // 清空现有书籍并显示加载状态
    bookListContainer.innerHTML = '<p>正在加载书籍...</p>';

    try {
      const res = await fetch(`${API_BASE_URL}/user/homePage`, { // 使用模板字符串方便拼接基础URL
        headers: {
          'Authorization': 'Bearer ' + token,
          'Content-Type': 'application/json' // 通常需要指定 Content-Type
        }
      });

      if (!res.ok) { // 更健壮的网络错误处理
        throw new Error(`HTTP error! status: ${res.status}`);
      }

      const result = await res.json();

      if (result.code === '0000' && result.data) {
        // 1. 更新用户信息
        if (result.data.userInfoVO && result.data.userInfoVO.username) {
          userInfoElement.textContent = '👤 ' + result.data.userInfoVO.username;
        } else {
          userInfoElement.textContent = '用户信息获取失败';
        }

        // 2. 渲染书籍列表
        const bookPage = result.data.bookPageVO;
        if (bookPage && bookPage.bookVOList && bookPage.bookVOList.length > 0) {
          renderBookList(bookPage.bookVOList, bookListContainer);
        } else {
          // 如果没有书籍数据
          bookListContainer.innerHTML = '<p>暂无推荐书籍。</p>';
        }

      } else {
        // API 返回错误码
        userInfoElement.textContent = '信息加载失败';
        bookListContainer.innerHTML = `<p>加载书籍失败: ${result.message || '未知错误'}</p>`;
        console.error('API Error:', result.message);
        // 根据code处理登录失效等情况
        if (result.code !== '0000' || result.code === 'A0201') { // 假设 A0200/A0201 是 token 失效/未登录
          alert('登录已过期或无效，请重新登录。');
          // localStorage.removeItem('token'); // 清除失效token
          // window.location.href = '/login';
        }
      }
    } catch (e) {
      // 网络或其他JS错误
      console.error('Fetch Error:', e);
      userInfoElement.textContent = '服务异常';
      bookListContainer.innerHTML = '<p>加载书籍时遇到问题，请稍后重试。</p>';
    }
  }

  // --- 新增：渲染书籍列表的函数 ---
  function renderBookList(books, container) {
    container.innerHTML = ''; // 清空加载提示或旧内容

    books.forEach(book => {
      const card = document.createElement('div');
      card.className = 'book-card';
      const imageUrl = book.coverImage;
      // 添加简单的图片加载失败处理
      const img = document.createElement('img');
      img.src = imageUrl;
      img.alt = book.title; // 添加 alt 文本，提高可访问性
      img.onerror = function() {
        // 图片加载失败时显示占位图或提示
        this.onerror = null; // 防止无限循环
        this.src = 'placeholder.png'; // 指向一个本地的占位图片
        this.alt = '图片加载失败';
        console.warn(`图片加载失败: ${imageUrl}`);
      };


      const infoDiv = document.createElement('div');
      infoDiv.className = 'book-info';

      const titleElement = document.createElement('h3');
      titleElement.className = 'book-title';
      titleElement.textContent = book.title;
      titleElement.title = book.title; // 鼠标悬停显示完整标题

      const priceElement = document.createElement('p');
      priceElement.className = 'book-price';
      // priceElement.textContent = `¥${book.price.toFixed(2)}`; // 格式化价格为两位小数
      priceElement.textContent = `${book.price}`; // 直接使用API返回的价格


      const stockElement = document.createElement('p');
      stockElement.className = 'book-stock';
      stockElement.textContent = `库存: ${book.stockQuantity}`;

      // 创建立即购买按钮
      const buyButton = document.createElement('button');
      buyButton.className = 'buy-button';
      buyButton.textContent = '立即购买';

      // 组装卡片
      infoDiv.appendChild(titleElement);
      infoDiv.appendChild(priceElement);
      infoDiv.appendChild(stockElement);
      infoDiv.appendChild(buyButton);

      card.appendChild(img);
      card.appendChild(infoDiv);

      // 可以添加点击事件，例如跳转到书籍详情页
      card.onclick = () => {
        console.log(`点击了书籍: ${book.title} (ID: ${book.id})`);
      };

      // 生成唯一的 bizSeq (使用时间戳 + 随机数的组合)
      function generateBizSeq() {
        const timestamp = Date.now();  // 当前时间戳
        const randomPart = Math.floor(Math.random() * 1000000);  // 随机数部分
        return `${timestamp}${randomPart}`;
      }

      buyButton.addEventListener('click', async () => {
        const bizSeq = generateBizSeq();
        const createOrderRequest = {
          bookId: book.id,
          quantity: 1 , // 假设默认购买 1 本
          bizSeq: bizSeq,
          price:book.price
        };

        try {
          const token = localStorage.getItem('token'); // 确保 key 是 'token'
          if (!token) {
            throw new Error('用户未登录，请先登录');
          }
          const response = await fetch('/createOrder', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify(createOrderRequest)
          });

          const data = await response.json();

          if (data.code === '0000') {
            const orderId = data.data;  // 假设后端返回的是订单ID
            // 跳转到订单详情页面，并带上订单ID
            console.error("orderId"+orderId);
            window.location.href = `http://localhost:8081/order-details.html?orderId=${orderId}`;
          }else {
            throw new Error(data.message || '创建订单失败');
          }
        } catch (error) {
          console.error(error);
          alert('订单创建失败，请稍后重试');
        }
      });

      container.appendChild(card);
    });
  }

  function searchBooks() {
    const keyword = document.getElementById('search-input').value.trim();
    const resultDiv = document.getElementById('result'); // 获取结果显示区域
    const bookListContainer = document.getElementById('book-list-container'); // 获取书籍列表区域

    if (!keyword) {
      alert('请输入搜索关键词');
      return;
    }
    resultDiv.textContent = `🔍 正在搜索「${keyword}」相关的书籍...`;
    resultDiv.style.display = 'block'; // 确保结果区可见
    bookListContainer.innerHTML = '<p>正在加载搜索结果...</p>'; // 清空书籍列表并显示加载

    console.log(`执行搜索: ${keyword}`);
  }

  function searchCategory(category) {
    const resultDiv = document.getElementById('result');
    const bookListContainer = document.getElementById('book-list-container');

    resultDiv.textContent = `📂 正在浏览「${category}」分类下的书籍...`;
    resultDiv.style.display = 'block';
    bookListContainer.innerHTML = `<p>正在加载 ${category} 类书籍...</p>`;

    console.log(`浏览分类: ${category}`);

  }

  // 页面加载时执行数据加载
  window.onload = loadHomePageData; // 修改为调用新的加载函数
</script>

</body>
</html>
